<template>
  <div class="registry">
    <div class="nav-header">
      <div class="nav-main">
        <img class="logo" src="../assets/cnblog.jpg" />
        <div class="right-item">
          <img @click="handleToPage('Home')" src="../assets/index.jpg" alt="" />
          <img @click="handleToPage('Login')" src="../assets/login.jpg" alt="" />
          <img src="../assets/registry.jpg" alt="" />
          <img src="../assets/help.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-main">
        <h3 class="title-tip">注册新用户</h3>
        <div class="form-content">
          <el-form
            class="form"
            ref="ruleForm"
            label-width="100px"
            size="mini"
            status-icon
            :model="formObj"
            :rules="rules"
            :hide-required-asterisk="true"
          >
            <el-form-item prop="email">
              <label slot="label">邮&emsp;&emsp;箱</label>
              <el-input
                v-model="formObj.email"
                placeholder="需要通过邮件激活账户"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="tel">
              <el-col :span="2" style="margin-right: 18px">
                <el-input
                  class="phone-pre"
                  v-model="formObj.phonePre"
                ></el-input>
              </el-col>
              <el-col :span="21">
                <el-input
                  placeholder="激活账户需要手机短信验证"
                  v-model="formObj.tel"
                ></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="登录名称" prop="username">
              <el-input
                placeholder="登录用户名，不少于4个字符"
                v-model="formObj.username"
              ></el-input>
            </el-form-item>
            <el-form-item label="显示昵称" prop="nickname">
              <el-input
                placeholder="不少于2个字符"
                v-model="formObj.nickname"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <label slot="label">密&emsp;&emsp;码</label>
              <el-input
                type="password"
                placeholder="至少8位，并包含字母、数字和特殊字符中的两种"
                v-model="formObj.password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <label slot="label">确认密码</label>
              <el-input
                type="password"
                placeholder="请输入确认密码"
                v-model="formObj.confirmPassword"
              ></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button
                @click="handleRegistry"
                class="plr30"
                size="mini"
                type="primary"
                >注&emsp;册</el-button
              >
            </el-form-item>
            <p class="policy">
              *点击“注册”按钮，即表示您同意并愿意遵守<a href="javascript:;"
                >用户协议</a
              >。
            </p>
          </el-form>
          <div class="line"></div>
          <img class="side-img" src="../assets/registersideimg.png" />
        </div>
      </div>
    </div>
    <div id="footer_bottom" class="text-center" style="display: block">
      <div>
        <a href="//www.cnblogs.com/AboutUS.aspx" class="d-none d-md-inline"
          >关于博客园</a
        >
        <a href="//www.cnblogs.com/ContactUs.aspx" class="d-none d-md-inline"
          >联系我们</a
        >
        ©2004-2021<a href="//www.cnblogs.com/">博客园</a>
        <span class="d-none d-md-inline">保留所有权利</span>
        <span id="powered_by">Powered by .NET Core on Kubernetes</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{8,50}$/;
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        callback(new Error("密码长度要求 8-50 位"));
      } else {
        if (this.formObj.confirmPassword !== "") {
          this.$refs.ruleForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formObj.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      formObj: {
        email: "",
        phonePre: "+86",
        username: "",
        nickname: "",
        tel: "",
        password: "",
        confirmPassword: "",
      },
      rules: {
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur",
          },
          {
            type: "email",
            message: "邮箱地址格式错误或不支持",
            trigger: "blur",
          },
        ],
        username: [
          {
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error("请输入登录用户名"));
              } else {
                if (value.length >= 4 && value.length <= 30) {
                  callback();
                } else {
                  return callback(
                    new Error("长度要求 4-30 个字符 (2-15 个中文)")
                  );
                }
              }
            },
            trigger: "blur",
          },
        ],
        nickname: [
          {
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error("请输入昵称"));
              } else {
                if (value.length >= 2 && value.length <= 20) {
                  callback();
                } else {
                  return callback(
                    new Error("长度要求 2-20 个字符 (1-10 个中文)")
                  );
                }
              }
            },
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator(rule, value, callback) {
              if (!value) {
                return callback(new Error("请输入手机号码"));
              } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                console.log(reg.test(value));
                if (reg.test(value)) {
                  callback();
                } else {
                  return callback(new Error("国家代码或手机号码格式错误"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleRegistry() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http
            .post("/user/registe", {
              ...this.formObj,
            })
            .then((res) => {
              if (
                (res.status >= 200 && res.status < 300) ||
                res.status === 304
              ) {
                if (res.data.code === 2) {
                  this.$message.success(res.data.message);
                  this.$router.push({
                      name: 'Login'
                  })
                } else {
                  this.$message.error(res.data.message);
                }
              } else {
                this.$message.error(res.statusText);
              }
            });
        }
      });
    },
    handleToPage(val) {
        this.$router.push({
            name: val
        })
    }
  },
};
</script>
<style scoped>
.registry {
  background-color: #fff;
  height: 100vh;
}
.nav-header {
  height: 54px;
  background-color: #283e5c;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.nav-main {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.logo {
  height: 54px;
}
.right-item img {
  height: 54px;
}
.content-main {
  width: 870px;
  margin: 0 auto;
  padding-top: 100px;
}
.title-tip {
  font-size: 21px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 400;
  color: #212529;
  padding-bottom: 6px;
}
.form {
  width: 630px;
  box-sizing: border-box;
  padding: 0 25px 0 15px;
  position: relative;
  left: -46px;
}
.phone-pre >>> .el-input__inner {
  padding: 0 5px;
  width: 45px;
}
.phone-pre >>> .el-icon-circle-close::before {
  content: "" !important;
}
.plr30 {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 16px;
}
.policy {
  text-align: center;
  margin-left: 100px;
  color: #606266;
  font-size: 13px;
}
.policy a {
  color: #3494fc;
}
.form-content {
  display: flex;
}
.side-img {
  width: 255px;
  height: 265px;
  border-radius: 5px;
}
.line {
  height: 225px;
  width: 1px;
  background-color: #eee;
  margin-right: 25px;
  margin-top: 15px;
}
.form >>> .el-form-item__error {
  right: 0;
  left: auto;
}
.form >>> .el-icon-circle-close::before {
  content: "\e6c9";
}
.form >>> .el-icon-circle-check::before {
  content: "";
}
</style>